<template>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="loadData(1)">
      <template #center>
        <view class="navbar-title"> 唯一租车押金即将到期 </view>
      </template>
    </FilterNavbar>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <freezeItem :record="item" v-for="item in dataSource" :key="item" />
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import FilterNavbar from '@/components/FilterNavbar'
  import { usePageDict } from '@/hooks/useDict'
  import useList from '@/hooks/useList'
  import freezeItem from './components/freezeItem.vue'

  const dict = usePageDict('shortOrderDict')
  const searchList = computed(() => {
    return [
      {
        prop: 'memberNameLike',
        label: '承租人姓名',
        type: 'input',
      },
      {
        prop: 'memberPhoneLike',
        label: '承租人电话',
        type: 'input',
      },
      {
        prop: 'orderCodeLike',
        label: '订单号',
        type: 'input',
      },
      {
        prop: 'carDepositStatus',
        label: '租车押金状态',
        type: 'picker',
        attrs: {
          options: dict.depositStatusEnum,
        },
      },
      {
        prop: ['planThawDateStart', 'planThawDateEnd'],
        label: '押金预计解冻日期',
        type: 'daterange-picker',
        attrs: {
          mode: 'date',
          valueFormat: 'YYYY-MM-DD',
        },
      },
    ]
  })

  const queryParam = ref({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/warning/deposit/memberWarnList',
    queryParam,
  )

  onLoad(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }
  .navbar-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #1d2129;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
</style>
